<template>
  <ElSelect filterable clearable :="$attrs" placeholder="" @change="onChange">
    <ElOption v-for="item in options" :key="item.val" :label="item.name" :value="item.val" />
  </ElSelect>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElSelect, ElOption } from 'element-plus'
import { getAllExName } from '../api'

interface Props {
  data: any;
}
const props = withDefaults(defineProps<Props>(), {
  data: () =>({}),
})

const options = ref<Array<{ name: string, val: string }>>([])

const getOptions = () => {
  getAllExName()
    .then(res => {
      options.value = res
    })
}

const onChange = (val) => {
  const op = options.value.find(i => i.val === val)
  props.data.companyName = op ? op.name : ''
  props.data.userId = ''
}

onMounted(() => {
  getOptions()
})
</script>
